import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
import { environment } from '../../../../environments/environment';
import { _HttpClient } from '@delon/theme';
declare const echarts: any;

@Component({
    selector: 'app-expertDiagnosis',
    templateUrl: './expertDiagnosis.component.html',
    styles: [`
        .wrapper{background:#fff;padding:10px;}
    `]
})

export class expertDiagnosisComponent implements OnInit {
    groupVisible = false;
    groupTimeValue: any;
    constructor(
        private http: _HttpClient,
        private datePipe: DatePipe
    ) { }

    ngOnInit() {
        this.groupTimeValue = this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss');
        this.groupApi(this.groupTimeValue.split(' ')[0]);
    }

    groupAlarmPop() {
        this.groupVisible = true;
        this.groupTimeValue = this.datePipe.transform(new Date(), 'yyyy-MM-dd HH:mm:ss');
        this.groupApi(this.groupTimeValue.split(' ')[0]);
    }
    groupTimeSearch() {
        this.groupApi(this.datePipe.transform(this.groupTimeValue, 'yyyy-MM-dd'));
    }
    groupApi(time) {
        this.groupByAlamrType(time, '1').subscribe((res1: any) => {
            this.getRes(res1, 'groupEcharts1');
            this.groupByAlamrType(time, '2').subscribe((res2: any) => {
                this.getRes(res2, 'groupEcharts2');
            });
        });
    }

    // 按报警类型统计
    groupByAlamrType(utime, alarmfromtable) {
        const url = environment.project + '/alarmTab2/groupByAlarmType?utime=' + utime + '&alarmfromtable=' + alarmfromtable;
        return this.http.get(url);
    }
    getRes(res, id) {
        if (res.msg === 'Ok') {
            if (res.data[0].lenght) {
                const list = res.data[0];
                const name = [];
                const data = [];
                for (const item of list) {
                    name.unshift(item.NAME);
                    data.unshift(item.C);
                }
                this.getEcharts(id, name, data);
            }
        }
    }
    getEcharts(id, name, sdata) {
        echarts.init(document.getElementById(id)).setOption({
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            grid: {
                left: '5%',
                right: 20,
                top: 20,
                bottom: 20,
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: false
            },
            yAxis: {
                type: 'category',
                data: name
            },
            series: [
                {
                    type: 'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside'
                        }
                    },
                    barWidth: 30,
                    itemStyle: {
                        normal: {
                            // 每根柱子颜色设置
                            color: (params) => {
                                const colorList = ["#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570", "#c23531", "#2f4554", "#61a0a8", "#d48265", "#91c7ae", "#749f83", "#ca8622", "#bda29a", "#6e7074", "#546570"];
                                return colorList[params.dataIndex];
                            }
                        }
                    },
                    data: sdata
                }
            ]
        }, true);
    }
}
